<template>
	<view class="container">
		<u-popup round="10" @close="closePop" mode="center" :show='true'>
			<u-form ref="form" labelPosition="left" :model="formData" labelWidth="1">
				<view class="modal">
					<view class="modal-header">
						<text class="title">{{popTitle}}</text>
						<u-icon class="close-icon" name="close" size="20" @click="closePop"></u-icon>
					</view>
					<view class="modal-body">
						<view class="select-box" v-for="(item,idx) in selectArr" :key="idx">
							<view :class="['select-item',{'active':item.status == true}]" @click="handleSelect(idx)"
								:style="{'background':item.status == true?item.tagBg:''}">
								<span :style="{'color':item.status == true?item.tagTextColor:''}">{{item.name}}</span>
							</view>
						</view>
					</view>
					<!-- 数量 -->
					<div class="modal-num">
						{{lableNum}}/{{newSelectArr.length || 0}}
					</div>
					<view class="modal-footer">
						<u-button class="cancel-btn" color="#295EFF" :plain="true" type="primary" @click="closePop">取消
						</u-button>
						<u-button class="submit-btn" type="primary" @click="submitTypeAndIndustry">确定更改</u-button>
					</view>
				</view>
			</u-form>
		</u-popup>
	</view>
</template>

<script>
	import {
		industryOptions,
		industryTypeOptions
	} from '@/config/industry-config';
	export default {
		props: {
			formData: {},
			popTitle: {
				type: String,
				default: ''
			},
			selectArr: {
				type: [String, Array],
				default: []
			}
		},
		data() {
			return {
				newSelectArr: [],
				lableNum:0
			};
		},
		watch: {
			selectArr(newVal, oldVal) {
				this.newSelectArr = newVal
				this.copNum()
			}
		},
		mounted() {
			this.newSelectArr = this.selectArr
			this.copNum()
			console.log('sss', this.newSelectArr)
		},
		methods: {
			handleSelect(index) {
				this.newSelectArr[index].status = !this.newSelectArr[index].status
				this.copNum()
			},
			copNum(){
				var num = 0
				for(var i in this.newSelectArr){
					if(this.newSelectArr[i].status){
						num ++
					}
				}
				this.lableNum = num
			},
			submitTypeAndIndustry() {
				var arr = []
				for (var i in this.newSelectArr) {
					if (this.newSelectArr[i].status == true) {
						arr.push(this.newSelectArr[i].tagId)
					}
				}
				console.log('this.newSelectArr', arr)
				this.$emit('confirmPop', arr)
			},
			closePop() {
				this.$emit('closePop')
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
		width: 100%;
		left: 0;
		top: 0;
		position: fixed;
	}

	.modal {
		/* width: 80%; */
		width: calc(100vw - 100rpx);
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10px;
		padding: 32rpx 54rpx;
		/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
		position: relative;
	}

	.active {
		color: #FFFFFF !important;
		border: none !important;
	}

	.modal-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}


	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.close-icon {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.modal-body {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background: #F6F9FF;
		padding: 24rpx 16rpx;
		box-sizing: border-box;
		/* margin-bottom: 32rpx; */
	}

	.modal-num {
		font-size: 24rpx;
		color: #8F969E;
		text-align: right;
		height: 52rpx;
		line-height: 52rpx;
	}

	.select-box {
		width: 33.3%;
	}

	.select-item {
		width: 160rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		border: 2rpx solid #8C8C8C;
		border-radius: 40rpx;
		color: #8C8C8C;
		font-size: 28rpx;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		/* margin: 0 20rpx; */
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
	}

	.submit-btn {
		/* margin-top: 32rpx; */
		width: 45%;
		height: 76rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		background-color: #295FFF;
		border: 2rpx solid #295FFF !important;
	}

	.cancel-btn {
		width: 45%;
		height: 76rpx;
		border-radius: 50rpx;
		border: 2rpx solid #295FFF !important;
		color: #295EFF !important;
	}
</style>
